<template>
	<!-- 首页-非她莫属 -->
	<view>
		<!-- <u-navbar back-icon-color="#000000" title="非“她”莫属" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<u-navbar back-text="非“她”莫属" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<view class="biaozhu">
			<image src="../../../static/icon/gantan.png" mode=""></image>
			<view class="write" style="margin-left: 22rpx;">地址会做隐私处理，订单确认前不会告知商家详细地址</view>
		</view>
		<view class="subject">
			<!-- 服务类型 -->
			<view>
				<view class="typeface1" style="vertical-align: bottom;font-weight: bold;">
					服务类型
					<image src="../../../static/img/1-10.png" style="width: 22rpx;height: 56rpx;vertical-align:middle;margin-left: 10rpx;"></image>
				</view>

				<scroll-view scroll-x="true">
					<view style="display: flex;flex-direction: row ;margin-top: 10rpx;">
						<view
							v-for="(item, index) in serviceType"
							:key="index"
							@click="serviceClick(item)"
							:class="item.businessId == serviceId ? 'selected' : 'uncheck'"
							style="text-align: center;margin: 12rpx;padding-right: 17rpx;position: relative;"
						>
							<!-- <view v-if="item.id==serviceId" class="" style="    position: relative;
						 top: -40%;
						 color: #ffffff;
						 font-size: 30rpx;">已选</view> -->

							<image :src="item.image" class="image" style="width: 142rpx;height: 126rpx;border-radius: 46rpx;">
								<view style="position: absolute;top: 24%;color: #FFFFFF;left: 30%;" v-if="item.businessId == serviceId">已选</view>
							</image>

							<view class="typeface2" style="margin-top: 16rpx;">{{ item.title }}</view>
							<!-- <image src="../../../static/icon/touming.png" v-if="item.id==serviceId" style="width: 174rpx;height: 124rpx;position: relative;z-index: 2;bottom: 85rpx;left:94rpx;"></image> -->
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 对护工的性别要求 -->
			<!-- <view style="margin-top: 10rpx;">
				<view class="typeface1">
					对护工的性别要求
				</view>
				<view style="display: flex;flex-wrap:wrap;margin-top: 28rpx;">
					<view v-for="(item,index) in sexList" :key="index" @click="sexClick(item.id)" :class="item.id==sexId?'selected':'uncheck'"
					 style="margin-right: 40rpx;">
						<view class="border" style="padding: 18rpx 0rpx; width: 168rpx;height: 78rpx;text-align: center;border-radius: 40rpx;font-size: 30rpx;">{{item.name}}</view>
						<image v-if="item.id==sexId" src="../../../static/icon/gou.png" style="width: 30rpx;height: 30rpx;position: relative;z-index: 2;left: 80px;bottom: 18rpx;"></image>
					</view>
				</view>
			</view> -->

			<!-- 是否住家 -->
			<view style="margin-top: 24rpx;" v-if="showitem.home">
				<view class="typeface1" style="font-weight: bold;">
					是否住家
					<image src="../../../static/img/1-10.png" style="width: 22rpx;height: 56rpx;vertical-align:middle;margin-left: 10rpx;"></image>
				</view>
				<view style="display: flex;flex-wrap:wrap;margin-top: 28rpx;">
					<view
						v-for="(item, index) in homeList"
						:key="index"
						@click="homeClick(item.id)"
						:class="item.id == homeId ? 'selected' : 'uncheck'"
						style="margin-right: 40rpx;"
					>
						<view class="border" style="padding: 18rpx 0rpx; width: 168rpx;height: 78rpx;text-align: center;border-radius: 40rpx;font-size: 30rpx;">
							{{ item.name }}
						</view>
						<!-- <image v-if="item.id==homeId" src="../../../static/icon/gou.png" style="width: 30rpx;height: 30rpx;position: relative;z-index: 2;left: 80px;bottom: 18rpx;"></image> -->
					</view>
				</view>
			</view>
			<view style="margin-top: 24rpx;" v-if="showitem.gender">
				<view class="typeface1" style="font-weight: bold;">
					性别
					<image src="../../../static/img/1-10.png" style="width: 22rpx;height: 56rpx;vertical-align:middle;margin-left: 10rpx;"></image>
				</view>
				<view style="display: flex;flex-wrap:wrap;margin-top: 28rpx;">
					<view
						v-for="(item, index) in genderList"
						:key="index"
						@click="genderClick(item.id)"
						:class="item.id == gender ? 'selected' : 'uncheck'"
						style="margin-right: 40rpx;"
					>
						<view class="border" style="padding: 18rpx 0rpx; width: 168rpx;height: 78rpx;text-align: center;border-radius: 40rpx;font-size: 30rpx;">
							{{ item.name }}
						</view>
						<!-- <image v-if="item.id==homeId" src="../../../static/icon/gou.png" style="width: 30rpx;height: 30rpx;position: relative;z-index: 2;left: 80px;bottom: 18rpx;"></image> -->
					</view>
				</view>
			</view>
			<!-- 薪资预算（2K-8K每月） -->
			<view style="margin-top: 24rpx;" v-if="showDemo">
				<view class="typeface1" style="font-weight: bold;">薪资预算</view>
				<!-- <view style="display: flex;flex-wrap:wrap;margin-top: 28rpx;">
					<slidingBlock @getMaxValue="getMaxPay" :minValue="minPay" :maxValue="maxPay" @getMinValue="getMinPay" tyle="margin: 15rpx;" :list="payList"></slidingBlock>
				</view> -->
				<view style="padding:0 10rpx">
					<slider-range
						:value="datamoney.value"
						:min="datamoney.min"
						:max="datamoney.max"
						:step="datamoney.step"
						:format="formats"
						:bar-height="3"
						:block-size="38"
						@change="handleRangeMoney"
					></slider-range>
				</view>

				<view style="width: 100%;display: flex;color: #E0E0E0;font-size: 20rpx;">
					<view style="width:26%;">|</view>
					<view style="width:24%;">|</view>
					<view style="width:24%;">|</view>
					<view style="width:26%;display: flex;">
						<view style="width: 50%;text-align: left;">|</view>
						<view style="width: 50%;text-align: right;">|</view>
					</view>
				</view>
				<view style="width: 100%;display: flex;color: #9393AA;font-size: 24rpx;">
					<view style="width:23%;">{{ datamoney.min / 1000 }}</view>
					<view style="width:17%;">{{ (1 * datamoney.average) / 1000 }}K</view>
					<view style="width:20%;text-align: center;">{{ (2 * datamoney.average) / 1000 }}K</view>
					<view style="width:16%;text-align: right;">{{ (3 * datamoney.average) / 1000 }}K</view>
					<view style="width:24%;text-align: right;">{{ datamoney.max / 1000 }}K及以上</view>
				</view>
			</view>

			<!-- 年龄要求（20-60岁之间） -->
			<view style="margin-top: 24rpx;" v-if="showDemo">
				<view class="typeface1" style="font-weight: bold;">年龄要求</view>
				<!-- <view style="display: flex;flex-wrap:wrap;margin-top: 28rpx;">
					<slidingBlock @getMaxValue="getMaxAge" :minValue="minAge" :maxValue="maxAge" @getMinValue="getMinAge" tyle="margin: 15rpx;" :list="ageList"></slidingBlock>
				</view> -->
				<view style="padding:0 10rpx">
					<slider-range
						:value="datapay.value"
						:min="datapay.min"
						:max="datapay.max"
						:step="datapay.step"
						:format="format"
						:bar-height="3"
						:block-size="38"
						@change="handleRangeChange"
					></slider-range>
				</view>

				<view style="width: 100%;display: flex;color: #E0E0E0;font-size: 20rpx;">
					<view style="width:26%;">|</view>
					<view style="width:24%;">|</view>
					<view style="width:24%;">|</view>
					<view style="width:26%;display: flex;">
						<view style="width: 50%;text-align: left;">|</view>
						<view style="width: 50%;text-align: right;">|</view>
					</view>
				</view>
				<view style="width: 100%;display: flex;color: #9393AA;font-size: 24rpx;">
					<view style="width:23%;">{{ datapay.min }}</view>
					<view style="width:17%;">{{ datapay.min + 1 * datapay.average }}</view>
					<view style="width:20%;text-align: center;">{{ datapay.min + 2 * datapay.average }}</view>
					<view style="width:16%;text-align: right;">{{ datapay.min + 3 * datapay.average }}</view>
					<view style="width:24%;text-align: right;">{{ datapay.max }}</view>
				</view>
			</view>

			<!-- 工作经验（不限） -->
			<view style="margin-top: 24rpx;">
				<view class="typeface1" style="font-weight: bold;">工作经验（不限）</view>
				<view class="wrap">
					<van-slider
						v-model="datas.value"
						use-button-slot
						@change="slidingEvent"
						@drag="slidingEvents"
						:max="datas.max"
						bar-height="3px"
						:min="datas.min"
						:step="datas.step"
						active-color="#FCA800"
					>
						<view class="custom-button" slot="button">{{ showslidingText(datas.value) }}</view>
					</van-slider>
				</view>
				<view style="width: 100%;display: flex;color: #E0E0E0;font-size: 20rpx;margin-top:10rpx;">
					<view style="width:26%;">|</view>
					<view style="width:24%;">|</view>
					<view style="width:24%;">|</view>
					<view style="width:26%;display: flex;">
						<view style="width: 50%;text-align: left;">|</view>
						<view style="width: 50%;text-align: right;">|</view>
					</view>
				</view>
				<view style="width: 100%;display: flex;color: #9393AA;font-size: 24rpx;">
					<view style="width:23%;">不限</view>
					<view style="width:17%;">1年</view>
					<view style="width:20%;text-align: center;">2年</view>
					<view style="width:16%;text-align: right;">3年</view>
					<view style="width:24%;text-align: right;">4年及以上</view>
				</view>
			</view>

			<!-- 学历要求 -->
			<view style="margin-top: 24rpx;">
				<view class="typeface1" style="font-weight: bold;">学历要求</view>
				<view class="wrap">
					<van-slider
						v-model="datatow.value"
						use-button-slot
						@drag="slidingEducation"
						@change="slidingEducations"
						:max="datatow.max"
						bar-height="3px"
						:min="datatow.min"
						:step="datatow.step"
						active-color="#FCA800"
					>
						<view class="custom-button" slot="button">{{ showslidingEducation(datatow.value) }}</view>
					</van-slider>
				</view>
				<view style="width: 100%;display: flex;color: #E0E0E0;font-size: 20rpx;margin-top:10rpx;">
					<view style="width:27%;">|</view>
					<view style="width:22%;">|</view>
					<view style="width:23%;">|</view>
					<view style="width:28%;display: flex;">
						<view style="width: 50%;text-align: left;">|</view>
						<view style="width: 50%;text-align: right;">|</view>
					</view>
				</view>
				<view style="width: 100%;display: flex;color: #9393AA;font-size: 24rpx;">
					<view style="width:23%;">小学</view>
					<view style="width:17%;">初中</view>
					<view style="width:20%;text-align: center;">高中</view>
					<view style="width:17%;text-align: right;">大专</view>
					<view style="width:23%;text-align: right;">更高学历</view>
				</view>
			</view>

			<!-- 交流语言（可多选，默认不选为不限） -->
			<view style="margin-top: 24rpx;">
				<view class="typeface1" style="font-weight: bold;">交流语言（可多选，默认不选为不限）</view>
				<view style="display: flex;flex-wrap:wrap;margin-top: 28rpx;">
					<view
						v-for="(item, index) in languageList"
						:key="index"
						@click="languageClick(item.id)"
						:class="selectLanguage.indexOf(item.id) != -1 ? 'selected' : 'uncheck'"
						style="width:50%;"
					>
						<view class="border" style="padding: 12rpx 0rpx; width: 298rpx;text-align: center;border-radius: 40rpx;font-size: 30rpx;margin: 0 auto;">
							{{ item.name }}
						</view>
						<!-- <image v-if="selectLanguage.indexOf(item.id)!=-1" src="../../../static/icon/gou.png" style="width: 30rpx;height: 30rpx;position: relative;z-index: 2;left: 285rpx;bottom: 18rpx;"></image> -->
					</view>
				</view>
			</view>

			<!-- 服务地址 -->
			<view style="margin-top: 26rpx;" v-if="showitem.address">
				<u-row>
					<u-col span="4"><text class="typeface1">服务地址：</text></u-col>
					<u-col span="8" text-align="right" @click="jumpToMap">
						<view style="display: flex;flex-direction: row;">
							<view class="typeface3" style="width: 90%;">{{ mapAddress ? mapAddress : '去选择地址' }}</view>
							<u-icon name="arrow-right" style="margin-left: 20rpx;" label-size="32"></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>

			<!-- 开始服务时长 -->
			<view style="margin-top: 26rpx;">
				<u-row>
					<u-col span="5"><text class="typeface1">开始服务时长：</text></u-col>
					<u-col span="7" text-align="right" @click="dateShow = true">
						<text class="typeface5">{{ defaultTime }}</text>
						<u-icon name="arrow-right" style="margin-left: 20rpx;" label-size="32"></u-icon>
					</u-col>
				</u-row>
			</view>

			<!-- 服务时长： -->
			<view style="margin-top: 26rpx;">
				<u-row>
					<u-col span="5"><text class="typeface1">服务时长：</text></u-col>
					<u-col span="7" text-align="right" @click="durationShow = true">
						<text class="typeface5">{{ durationName }}</text>
						<u-icon name="arrow-right" style="margin-left: 20rpx;" label-size="32"></u-icon>
					</u-col>
				</u-row>
			</view>

			<!-- 高级筛选(选填，可多选)： -->
			<view style="margin-top: 26rpx;">
				<u-row>
					<u-col span="8"><text class="typeface1">高级筛选(选填，可多选)：</text></u-col>
					<u-col span="4" text-align="right" @click="jumpToMajor">
						<text class="typeface5">已选{{ skillIdsnum }}项</text>
						<u-icon name="arrow-right" style="margin-left: 20rpx;" label-size="32"></u-icon>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 立即寻找 -->
		<view class="LookingBottom" @click="jumpToMatchingList">立即寻找</view>

		<!-- 选择服务时间 -->
		<u-select
			style="line-height: 32rpx;width: 4%;"
			v-model="dateShow"
			title="选择服务时间"
			mode="mutil-column-auto"
			:list="list"
			confirm-color="#FCC800"
			@confirm="getDefaultTime"
		></u-select>

		<!-- 选择服务时长 -->
		<u-select
			v-model="durationShow"
			:default-value="duration"
			:list="durationList"
			title="选择服务时长"
			confirm-text="确认"
			confirm-color="#FCC800"
			@confirm="getDuration"
		></u-select>
	</view>
</template>

<script>
import slidingBlock from '../../../components/page/slidingBlock.vue';
import SliderRange from '../../../components/primewind-sliderrange/components/primewind-sliderrange/index.vue';
export default {
	components: {
		slidingBlock,
		SliderRange
	},
	data() {
		return {
			showDemo: false,
			showitem: {
				gender: false,
				home: true,
				address: true
			},
			genderList: [
				{
					id: 2,
					name: '女'
				},
				{
					id: 1,
					name: '男'
				}
			],
			gender: 2,
			mapAddress: '',
			skillIds: [],
			skillIdsnum: 0,
			datas: {
				value: 2,
				max: 4,
				min: 0,
				step: 1
			}, //工作经历
			datatow: {
				value: 2,
				max: 4,
				min: 0,
				step: 1
			}, //学历
			datapay: {
				average: 0,
				value: [30, 40],
				max: 60,
				min: 20,
				step: 5
			}, //年龄
			datamoney: {
				average: 0,
				value: [2000, 8000],
				max: 20000,
				min: 0,
				step: 1000
			}, //薪资
			background: {
				backgroundColor: '#fca800'
			},
			serviceType: [],
			serviceId: 1,
			payList: [
				{
					value: 2,
					name: '2k'
				},
				{
					value: 3,
					name: '3k'
				},
				{
					value: 4,
					name: '4k'
				},
				{
					value: 5,
					name: '5k'
				},
				{
					value: 6,
					name: '6k'
				},
				{
					value: 7,
					name: '7k'
				},
				{
					value: 8,
					name: '8k'
				},
				{
					value: 9,
					name: '9k'
				}
			],
			minPay: 0,
			maxPay: 0,

			ageList: [
				{
					value: 20,
					name: '20'
				},
				{
					value: 25,
					name: '25'
				},
				{
					value: 30,
					name: '30'
				},
				{
					value: 35,
					name: '35'
				},
				{
					value: 40,
					name: '40'
				},
				{
					value: 45,
					name: '45'
				},
				{
					value: 50,
					name: '50'
				},
				{
					value: 55,
					name: '55'
				},
				{
					value: 60,
					name: '60'
				}
			],
			minAge: 0,
			maxAge: 0,

			experienceList: [
				{
					value: 0,
					name: '不限'
				},
				{
					value: 1,
					name: '一年以上'
				},
				{
					value: 2,
					name: '两年以上'
				},
				{
					value: 3,
					name: '三年以上'
				},
				{
					value: 4,
					name: '四年以上'
				}
			],
			experience: 0,

			educationList: [
				{
					value: 0,
					name: '不限'
				},
				{
					value: 1,
					name: '小学'
				},
				{
					value: 2,
					name: '初中'
				},
				{
					value: 3,
					name: '高中'
				},
				{
					value: 4,
					name: '大专'
				},
				{
					value: 5,
					name: '本科'
				},
				{
					value: 6,
					name: '研究生'
				}
			],
			education: 0,

			languageList: [
				{
					id: 1,
					name: '普通话'
				},
				{
					id: 2,
					name: '英语'
				}
			],
			selectLanguage: [1],

			dateShow: false,
			list: [],
			defaultTime: '',

			durationShow: false,
			durationList: [
				{
					value: '1',
					label: '一个月'
				},
				{
					value: '2',
					label: '两个月'
				},
				{
					value: '3',
					label: '三个月'
				},
				{
					value: '4',
					label: '四个月'
				},
				{
					value: '5',
					label: '五个月'
				},
				{
					value: '6',
					label: '六个月'
				},
				{
					value: '7',
					label: '七个月'
				},
				{
					value: '8',
					label: '八个月'
				},
				{
					value: '9',
					label: '九个月'
				},
				{
					value: '10',
					label: '十个月'
				},
				{
					value: '11',
					label: '十一个月'
				},
				{
					value: '12',
					label: '十二个月'
				}
			],
			duration: '1',
			durationName: '一个月',

			sexList: [
				{
					id: 1,
					name: '男'
				},
				{
					id: 2,
					name: '女'
				}
			],
			sexId: 1,

			homeList: [
				{
					id: 2,
					name: '不限制'
				},
				{
					id: 1,
					name: '必须住家'
				},
				{
					id: 0,
					name: '不住家'
				}
			],
			homeId: 2
		};
	},
	onLoad(option) {
		console.log(option.businessId,"businessid")
		// 获取服务类型
		this.getServer(option.businessId);
		if (this.showitem.home && this.homeId == 1) {
			this.showitem.address = false;
		} else {
			this.showitem.address = true;
		}
		// 获取服务记录
		// this.getSearchform();
		// if(option.businessId){
		// 	console.log(option)
		// 	var that=this;
		// 	var showHome = '';
		// 	var showGender = '';
		// 	var items={};
		// 	that.serviceType.forEach(item => {
		// 		if (item.businessId == option.businessId) {
		// 			items=item;
		// 			showHome = item.showHome;
		// 			showGender = item.showGender;
					
		// 			that.datapay.max = item.maxAge;
		// 			that.datapay.min = item.minAge;
		// 			// that.datapay.value = [that.datapay.min, that.datapay.max / 4];
					
		// 			that.datamoney.min = parseInt(item.minSalary);
		// 			that.datamoney.max = parseInt(item.maxSalary);
		// 			// that.datamoney.value = [that.datamoney.min, that.datamoney.max / 4];
					
		// 			that.datapay.average = (item.maxAge - item.minAge) / 4;
		// 			that.datamoney.average = (parseInt(item.maxSalary) - parseInt(item.minSalary)) / 4;
		// 		}
		// 	});
		// 	console.log(items)
		// 	if (showHome == 1) {
		// 		that.showitem.home = true;
		// 	} else {
		// 		that.showitem.home = false;
		// 	}
		// 	if (showGender == '1') {
		// 		that.showitem.gender = true;
		// 	} else {
		// 		that.showitem.gender = false;
		// 	}
		// 	that.datamoney.value = [parseInt(items.minChooseSalary), parseInt(items.maxChooseSalary)];
		// 	that.datapay.value = [items.minChooseAge, items.maxChooseAge];
		// }
	},
	onReady() {
		this.getDatas();
	},
	methods: {
		// 获取服务类型
		getServer(businessId) {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user-search/form'
			};
			let data = {};
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					this.serviceType = res.data.businessList;
					if(businessId){
						var that = this;
						var showHome = '';
						var showGender = '';
						that.serviceId = businessId;
						that.serviceType.forEach(item => {
							if (item.businessId == businessId) {
								showHome = item.showHome;
								showGender = item.showGender;
						
								that.datapay.max = item.maxAge;
								that.datapay.min = item.minAge;
								// that.datapay.value = [that.datapay.min, that.datapay.max / 4];
						
								that.datamoney.min = parseInt(item.minSalary);
								that.datamoney.max = parseInt(item.maxSalary);
								// that.datamoney.value = [that.datamoney.min, that.datamoney.max / 4];
						
								that.datapay.average = (item.maxAge - item.minAge) / 4;
								that.datamoney.average = (parseInt(item.maxSalary) - parseInt(item.minSalary)) / 4;
						
							}
						});
						if (showHome == 1) {
							that.showitem.home = true;
						} else {
							that.showitem.home = false;
						}
						if (showGender == '1') {
							that.showitem.gender = true;
						} else {
							that.showitem.gender = false;
						}
						if (res.data.residence) {
							that.homeId = res.data.residence;
						}
						if (res.data.gender) {
							that.gender = res.data.gender;
						}
						that.datamoney.value = [parseInt(res.data.minChooseSalary), parseInt(res.data.maxChooseSalary)];
						that.datapay.value = [res.data.minChooseAge, res.data.maxChooseAge];
						that.datas.value = res.data.workYear;
						that.datatow.value = res.data.education;
						
						if (res.data.language) {
							var arr = res.data.language.split(',');
							var arrs = [];
							arr.forEach(itee => {
								arrs.push(parseInt(itee));
							});
							that.selectLanguage = arrs;
						} else {
							that.selectLanguage = [];
						}
						that.showDemo = true;
						
					}else{
						if (res.data.businessId) {
							var that = this;
							var showHome = '';
							var showGender = '';
							that.serviceId = res.data.businessId;
							that.serviceType.forEach(item => {
								if (item.businessId == res.data.businessId) {
									showHome = item.showHome;
									showGender = item.showGender;
						
									that.datapay.max = item.maxAge;
									that.datapay.min = item.minAge;
									// that.datapay.value = [that.datapay.min, that.datapay.max / 4];
						
									that.datamoney.min = parseInt(item.minSalary);
									that.datamoney.max = parseInt(item.maxSalary);
									// that.datamoney.value = [that.datamoney.min, that.datamoney.max / 4];
						
									that.datapay.average = (item.maxAge - item.minAge) / 4;
									that.datamoney.average = (parseInt(item.maxSalary) - parseInt(item.minSalary)) / 4;
						
								}
							});
							if (showHome == 1) {
								that.showitem.home = true;
							} else {
								that.showitem.home = false;
							}
							if (showGender == '1') {
								that.showitem.gender = true;
							} else {
								that.showitem.gender = false;
							}
							if (res.data.residence) {
								that.homeId = res.data.residence;
							}
							if (res.data.gender) {
								that.gender = res.data.gender;
							}
							that.datamoney.value = [parseInt(res.data.minChooseSalary), parseInt(res.data.maxChooseSalary)];
							that.datapay.value = [res.data.minChooseAge, res.data.maxChooseAge];
							that.datas.value = res.data.workYear;
							that.datatow.value = res.data.education;
						
							if (res.data.language) {
								var arr = res.data.language.split(',');
								var arrs = [];
								arr.forEach(itee => {
									arrs.push(parseInt(itee));
								});
								that.selectLanguage = arrs;
							} else {
								that.selectLanguage = [];
							}
							that.showDemo = true;
						} else {
							this.datapay.max = res.data.businessList[0].maxAge;
							this.datapay.min = res.data.businessList[0].minAge;
							this.datapay.value = [this.datapay.min, this.datapay.max / 4];
						
							this.datamoney.min = parseInt(res.data.businessList[0].minSalary);
							this.datamoney.max = parseInt(res.data.businessList[0].maxSalary);
							this.datamoney.value = [this.datamoney.min, this.datamoney.max / 4];
						
							this.datapay.average = (res.data.businessList[0].maxAge - res.data.businessList[0].minAge) / 4;
							this.datamoney.average = (parseInt(res.data.businessList[0].maxSalary) - parseInt(res.data.businessList[0].minSalary)) / 4;
						
							this.serviceId = res.data.businessList[0].businessId;
							var showHome = res.data.businessList[0].showHome;
							var showGender = res.data.businessList[0].showGender;
							if (showHome == 1) {
								this.showitem.home = true;
							} else {
								this.showitem.home = false;
							}
							if (showGender == '1') {
								this.showitem.gender = true;
							} else {
								this.showitem.gender = false;
							}
							this.showDemo = true;
						}
					}
					
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		// 工作经验点击事件
		slidingEvent(e) {
			this.datas.value = e.detail;
		},
		// 工作经验滑动事件
		slidingEvents(e) {
			this.datas.value = e.detail.value;
		},
		// 判断工作经验显示文字
		showslidingText(num) {
			switch (num) {
				case 0:
					return '0年';
					break;
				case 1:
					return '1年';
					break;
				case 2:
					return '2年';
					break;
				case 3:
					return '3年';
					break;
				case 4:
					return '4年';
					break;
				default:
					return '不限';
			}
		},
		//学历滑动
		slidingEducation(e) {
			this.datatow.value = e.detail.value;
		},
		//学历点击
		slidingEducations(e) {
			this.datatow.value = e.detail;
		},
		// 判断工学历显示文字
		showslidingEducation(num) {
			switch (num) {
				case 0:
					return '小学';
					break;
				case 1:
					return '初中';
					break;
				case 2:
					return '高中';
					break;
				case 3:
					return '大专';
					break;
				case 4:
					return '更高';
					break;
				default:
					return '不限';
			}
		},
		handleRangeMoney(e) {
			this.datamoney.value = e;
		},
		handleRangeChange(e) {
			this.datapay.value = e;
		},
		format(val) {
			return val;
		},
		formats(val) {
			if (val > 0) {
				return val / 1000 + 'K';
			} else {
				return 0 + 'K';
			}
		},
		serviceClick: function(item) {
			this.serviceId = item.businessId;
			this.datapay.max = item.maxAge;
			this.datapay.min = item.minAge;
			this.datapay.value = [item.minAge, item.maxAge / 4 + item.minAge];
			
			this.datamoney.min = parseInt(item.minSalary);
			this.datamoney.max = parseInt(item.maxSalary);
			this.datamoney.value = [this.datamoney.min, this.datamoney.max / 4];

			this.datapay.average = (item.maxAge - item.minAge) / 4;
			this.datamoney.average = (parseInt(item.maxSalary) - parseInt(item.minSalary)) / 4;

			if (item.showHome == 1) {
				this.showitem.home = true;
			} else {
				this.showitem.home = false;
			}
			if (item.showGender == 1) {
				this.showitem.gender = true;
			} else {
				this.showitem.gender = false;
			}
		},
		//获取最大薪资
		getMaxPay: function(val, list) {
			this.payList = list;
			this.maxPay = val;
		},
		//获取最小薪资
		getMinPay: function(val, list) {
			this.payList = list;
			this.minPay = val;
		},
		//获取最大年龄
		getMaxAge: function(val, list) {
			this.ageList = list;
			this.maxAge = val;
		},
		//获取最小年龄
		getMinAge: function(val, list) {
			this.ageList = list;
			this.minAge = val;
		},

		//获取工作经验
		getExperience: function(val, list) {
			this.experienceList = list;
			this.experience = val;
		},
		//获取学历
		getEducation: function(val, list) {
			this.educationList = list;
			this.education = val;
		},
		//选择语言
		languageClick(id) {
			if (this.selectLanguage.indexOf(id) != -1) {
				for (let i = 0; i < this.selectLanguage.length; i++) {
					if (id == this.selectLanguage[i]) {
						this.selectLanguage.splice(i, 1);
					}
				}
			} else {
				this.selectLanguage.push(id);
			}
		},
		getDefaultTime: function(val) {
			this.dateShow = false;
			this.defaultTime = val[0].label + ' ' + val[1].label;
		},
		//获取服务时长
		getDuration: function(val) {
			this.duration = val[0].value;
			this.durationName = val[0].label;
			this.durationShow = false;
		},
		//获取性别
		sexClick: function(val) {
			this.sexId = val;
		},
		//获取是否住家
		homeClick: function(val) {
			this.homeId = val;
			if (this.homeId == 1) {
				this.showitem.address = false;
			} else {
				this.showitem.address = true;
			}
		},
		// 选择性别
		genderClick: function(val) {
			this.gender = val;
		},
		jumpToMajor: function() {
			var serviceId = this.serviceId;
			if (this.skillIds.length > 0) {
				var skillIds = JSON.stringify(this.skillIds);
				uni.navigateTo({
					url: './major/major?serviceId=' + serviceId + '&skillIds=' + skillIds
				});
			} else {
				uni.navigateTo({
					url: './major/major?serviceId=' + serviceId
				});
			}
		},
		jumpToMatchingList: function() {
			var data = {
				businessId: this.serviceId, //服务id
				residence: this.showitem.home ? this.homeId : '', //是否住家
				minChooseSalary: this.datamoney.value[0], //薪资最少
				maxChooseSalary: this.datamoney.value[1], //薪资最多
				minChooseAge: this.datapay.value[0], //年龄最小
				maxChooseAge: this.datapay.value[1], //年龄最大
				workYear: this.datas.value, //工作时长
				education: this.datatow.value, //学历
				mapAddress: this.showitem.address ? this.mapAddress : '', //地址
				language: this.selectLanguage, //语言
				skillIds: this.skillIds, //技能
				gender: this.showitem.gender ? this.gender : '', //性别
				beginTime: this.defaultTime,
				durationName: this.durationName
			};
			if (this.beginTime == '') {
				this.$refs.uToast.show({
					title: '服务开始时长不能为空',
					type: 'error'
				});
				return false;
			}
			var screeningData = JSON.stringify(data);
			uni.navigateTo({
				url: './matchingList/matchingList?screeningData=' + screeningData
			});
		},
		jumpToMap: function() {
			uni.navigateTo({
				url: '../../map/map?type=2'
			});
		},
		// 请选择时间
		getDatas() {
			var arr = [];
			var _this = this;
			var date = new Date();
			var showDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
			var nextData = '';
			for (var i = 1; i <= 6; i++) {
				//后7天
				date.setDate(date.getDate() + 1);
				nextData = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
				arr.push({
					value: i + 1,
					label: nextData
				});
			}
			var datas = [
				{
					value: 1,
					label: '7:00'
				},
				{
					value: 2,
					label: '8:00'
				},
				{
					value: 3,
					label: '9:00'
				},

				{
					value: 4,
					label: '10:00'
				},
				{
					value: 5,
					label: '11:00'
				},
				{
					value: 6,
					label: '12:00'
				},
				{
					value: 7,
					label: '13:00'
				},
				{
					value: 8,
					label: '14:00'
				},

				{
					value: 9,
					label: '15:00'
				},
				{
					value: 10,
					label: '16:00'
				},
				{
					value: 11,
					label: '17:00'
				},
				{
					value: 12,
					label: '18:00'
				},
				{
					value: 13,
					label: '19:00'
				}
			];
			var nowtime = date.getHours();
			var indexs = null;
			datas.forEach((item, index) => {
				var tex = parseInt(item.label.substring(0, 2));
				if (parseInt(item.label.substring(0, 2)) == nowtime) {
					indexs = index;
				}
			});
			this.arrayInex = datas.splice(0, indexs + 1);
			var items = [];
			if (19 > nowtime) {
				items.push({
					value: 1,
					label: showDate
				});
			}
			items = items.concat(arr);
			items.forEach((item, index) => {
				if (index == 0 && datas.length > 0) {
					item.children = datas;
				} else {
					item.children = [
						{
							value: 1,
							label: '7:00'
						},
						{
							value: 2,
							label: '8:00'
						},
						{
							value: 3,
							label: '9:00'
						},

						{
							value: 4,
							label: '10:00'
						},
						{
							value: 5,
							label: '11:00'
						},
						{
							value: 6,
							label: '12:00'
						},
						{
							value: 7,
							label: '13:00'
						},
						{
							value: 8,
							label: '14:00'
						},

						{
							value: 9,
							label: '15:00'
						},
						{
							value: 10,
							label: '16:00'
						},
						{
							value: 11,
							label: '17:00'
						},
						{
							value: 12,
							label: '18:00'
						},
						{
							value: 13,
							label: '19:00'
						}
					];
				}
			});
			// console.log(items);
			this.list = items;
		}
	}
};
</script>

<style>
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.subject {
	padding: 20rpx 32rpx 0rpx 32rpx;
}

.titleTest {
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #3f3f3f;
	opacity: 0.9;
}

.typeface1 {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3f3f3f;
	opacity: 1;
}

.typeface2 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #000000;
	opacity: 1;
}

.selected .image {
	filter: blur(5rpx);
}
.selected .typeface2 {
	color: #fca800;
}

.uncheck .image {
	background: rgba(0, 0, 0, 0.16);
	/* border: 4px solid rgba(0, 0, 0, 0.16); */
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
}

.selected .border {
	background: #fca800;
	/* border: 4rpx solid #FCC800; */
	box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
	opacity: 1;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	opacity: 1;
}

.uncheck .border {
	background: #f5f5f5;
	box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
	opacity: 1;
	font-size: 24rpx;
	/* border: 4rpx solid #FFFFFF; */
	font-family: PingFang SC;
	font-weight: 400;
	color: #979797;
	opacity: 1;
}

.typeface3 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #979797;
	opacity: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.typeface4 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #f29423;
	opacity: 1;
}

.typeface5 {
	font-size: 26rpx;
	font-family: PingFang SC;
	/* font-weight: bold; */
	color: #979797;
	opacity: 1;
}

.LookingBottom {
	margin: 58rpx 42rpx 24rpx 42rpx;
	background: #fca800;
	opacity: 1;
	border-radius: 36rpx;
	width: 666rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
	opacity: 1;
}
.biaozhu {
	color: #f86565;
	display: flex;
	align-items: center;
	font-size: 26rpx;
	height: 64rpx;
	padding-left: 28rpx;
	padding-right: 18rpx;
	background-color: #fff4de;
	line-height: 64rpx;
}
.biaozhu image {
	width: 29rpx;
	height: 29rpx;
}
/* 新滑块样式 */
.wrap {
	margin-top: 36rpx;
	padding: 30rpx 15rpx;
}
.custom-button {
	color: #272755;
	border: 1rpx solid #fca800;
	font-size: 24rpx;
	line-height: 68rpx;
	text-align: center;
	background-color: #ffffff;
	border-radius: 24rpx;
	/* padding: 1rpx 16rpx; */
	width: 70rpx;
	text-align: center;
}
/* 新滑块样式结束*/
</style>
